class Login {
    constructor() {
        this.pwd = '';
        this.user = '';
        this.i = false;
        this.a = document.querySelector('.leg').nextElementSibling
        document.querySelector('.leg').onmouseover = this.mouseOverFn.bind(this);
        document.querySelector('.leg').onmouseout = this.mouseOutFn.bind(this);
        document.querySelector('.erweima').onmouseover = this.focusFn.bind(this)
        document.querySelector('.erweima').onmouseout = this.eFn
        this.pwdObj = document.querySelector('#pwd')
        this.pwdObj.onblur = this.pwdFn
        this.userObj = document.querySelector('#user')
        this.userObj.onblur = this.userFn
        document.querySelector('#card-delu').onclick = this.btnClickFn
        this.cardInput = document.querySelectorAll('.card-input')
        this.inputClick()
    }
    inputClick() {
        this.cardInput.forEach((v) => {
            v.addEventListener('click', function () {
                v.style.border = '1px solid #ff5c00'
                v.style.backgroundColor = "rgba(252,242,243)"
            })
        })
    }
    btnClickFn() {
        this.pwd = document.querySelector('#pwd').value
        this.user = document.querySelector('#user').value
        let that = this
        if (this.pwd && this.user) {

            let data = localStorage.getItem('userName')
            JSON.parse(data).forEach(function (v) {
                if (v.user == that.user) {
                    console.log(v.user);
                    if (v.pwd == that.pwd) {

                        layer.msg('登录成功');
                        localStorage.setItem('已登录', 1)
                        window.location.href = 'http://127.0.0.1:5500/xiaomiyoupin/index.html'
                    } else {
                        layer.msg('密码错误');
                    }
                } else {
                    layer.msg('请先注册');

                }
            })
        } else {
            layer.msg('请输入账号');
        }
    }
    pwdFn() {
        this.pwd = this.value
        let spanObj = this.parentNode.nextElementSibling
        if (!this.pwd) {
            spanObj.style.opacity = '1'
        } else {
            this.parentNode.style.backgroundColor = "#f9f9f9"
            this.parentNode.style.border = '0'
        }
    }
    userFn() {
        this.user = this.value
        let spanObj2 = this.parentNode.nextElementSibling
        if (!this.user) {
            spanObj2.style.opacity = '1'
        } else {
            this.parentNode.style.backgroundColor = "#f9f9f9"
            this.parentNode.style.border = '0'
        }
    }
    eFn() {
        document.querySelector('.erweima').style.opacity = 0.4;
        document.querySelector('.erweima .e').style.display = 'none'
    }
    focusFn() {
        this.i = false
        document.querySelector('.erweima').style.opacity = 1;
        document.querySelector('.erweima .e').style.display = 'block'
        //    let tips=document.createElement('div')
        //    tips.style.backgroundColor='#ff5c00'
        //    tips.style.color='white'
        //    tips.style.width='60px'
        //    tips.style.position='absolute'
        //    tips.style.top='-10px'
        //    tips.style.right='16px'
        //    tips.innerHTML='扫码登录'
        //    document.querySelector('.erweima').appendChild(tips)


    }
    mouseOverFn() {
        // console.log(1);
        this.a.style.display = 'block'
        document.querySelector('.leg').style.color = '#ff5c00'
    }
    mouseOutFn() {
        // console.log(2);
        this.a.style.display = 'none'
        document.querySelector('.leg').style.color = '#838383'
    }

}
new Login